<template>
	<view>
		<u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<u-icon name="github-circle-fill" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="tologin()">
			<view class="u-m-r-10">
				<u-avatar :src="info.img" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" @click="tologin">
				<view class="u-font-18 u-p-b-20">{{info.nickname||"请点击登录"}}</view>
				<view class="u-font-14 u-tips-color">{{info.username?"用户名："+info.username:""}}</view>
			</view>
			<view class="u-m-l-10 u-p-10" @click="tosetting" v-if="info.username">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="收藏" @click="tocollection"></u-cell-item>
				<u-cell-item icon="chat" title="评论" @click="tocomment"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item v-if="this.info.permissions != 'client'" icon="star" title="我的文章" @click="tomyArticle"></u-cell-item>
				<u-cell-item v-if="this.info.permissions == 'client'" icon="heart" title="加入我们" @click="apply"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="今日浏览时间" :arrow="false">
					<p slot="right-icon">{{time}}分钟</p>
				</u-cell-item>
				<u-cell-item title="今日浏览量" :arrow="false">
					<p slot="right-icon">{{num}}个</p>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20" v-if="info.nickname">
			<u-cell-group>
				<u-cell-item icon="close" title="退出登录" :arrow="false" @click="modalShow"></u-cell-item>
			</u-cell-group>
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" @confirm="tologout"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				content: "确认退出登录吗？",
				time:0,
				num:0
			}
		},
		onLoad() {
			
		},
		onShow() {
			if(this.info.username){
				this.$u.api.postinfo(this.token).then(rs => {
						console.log(rs)
						let info = {
							username: this.info.username,
							password: this.info.password,
							img: rs.data.imgurl,
							nickname: rs.data.nickname,
							email: rs.data.email,
							permissions : rs.data.permissions,
						}
						this.$u.vuex('vuex_user', info);
				}).catch(err => {
					console.log(err)
				})
				this.$u.api.postchecktime({username:this.info.username}).then(res=>{
					console.log(res.data)
					this.time = parseInt(res.data.time/60)
					this.num = parseInt(res.data.num)
				})
			}
				
		},
		computed: {
			...mapGetters({
				info: "vuex_user",
				token: "vuex_token"
			})
		},
		methods: {
			tologin() {
				if (!this.info.nickname) {
					this.$u.route('/pages/login/login');
				}
			},
			tocollection() {
				if (this.info.nickname) {
					this.$u.route('pages/collection/collection');
				} else {
					this.$refs.uToast.show({
						title: '请先登录',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						// type: 'success', 
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}
			},
			tocomment() {
				if (this.info.nickname) {
					this.$u.route('/pages/comment/comment');
				} else {
					this.$refs.uToast.show({
						title: '请先登录',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						// type: 'success', 
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}
			},
			modalShow() {
				this.show = true
			},
			tologout() {
				this.$u.vuex('vuex_user', {});
				this.$u.vuex('vuex_token', '');
			},
			tosetting(){
				this.$u.route('/pages/setting/setting');
			},
			apply(){
				this.$u.route('/pages/apply/apply');
			},
			tomyArticle(){
				this.$u.route('/pages/myarticle/myarticle');
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
